<!--  -->
<template>
  <div class="main">
      <div class="boxLeft">
        <span class="title">邀请开票员完成电子税务局登录</span>

        <div class="preview">
          <p>
            尊敬的"{{form.entName}}"，您有开票信息待确认；开票员：{{form.kpyName}}    联系电话： {{form.kpyPhone}} , 点击以下链接确认信息并完成验证。
            <a :href="form.url" target="_blank">{{ form.url }}</a>
          </p>
        </div>

        <div style="display: flex;justify-content: center;   width: 305px;">
          <a-button @click="confirmLogged" type="primary" class="mLeft" v-preventReClick>确认已核验</a-button>
          <a-button type="primary" :disabled="CountDownConfig.isRun" @click="startEvent" class="mLeft" >{{CountDownConfig.label}}</a-button>
        </div>
        <!-- v-if="CountDownConfig.isRun" -->
      </div>
      <div class="boxRight">
        <span class="title">扫码确认信息并完成验证</span>

        <a-spin :spinning="spinning">
          <div class="code">
            <img class="img" :src="codeUrl" alt="二维码图片">
          </div>
        </a-spin>

        <!-- <p class="tips" v-if="codeShow">复制成功</p> -->
        <a-button type="primary" @click="upDown">下载二维码</a-button>
      </div>
    </div>
</template>

<script>
import {
  sendEleIssuerAuthSMS,getInvoiceUserFaceState,
  queryConfirmedVerified,getInvoiceWhetherUserFace,getInvoiceBaseUrl
} from '@/api/invoiceAdminister'

import useCountDown from './../utils/useCountDown'
import QRious from 'qrious'
export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'InvitationVerification',
  components: {},
  props: {
    closeEvent: {
      type: Function,
    },
    Setloading: {
      type: Function,
    },
    // 用于传递到组件中的数据
    data: {
      type: [Array, Object],
      required: true,
    },
  },
  data() {
    // 这里存放数据
    return {
      url: 'https://www.baidu.com',
      codeUrl: '',
      spinning: false,
      form: {
        entName: "",
        kpyName:'',
        kpyPhone: '',
        url: ''
      },
      tempData: {},
      // 倒计时 配置
      CountDownConfig: { label: '', time: 15, isRun: false, res:{} },
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    data: {
      handler(val) {
       const {dbData} = val
       if (!this.isType.isNullOrUnDef(dbData) || !this.isType.isEmpty(dbData)) {
          this.tempData = dbData
          this.setForm(dbData)
          this.CountDownConfig.res = useCountDown(this,{ defaultLabel: '发送短信', reoperateLabel: '后重新发送',  time: 60, startEvent: () => { }, endEvent: ()=>{}})
       }
      },
      deep: true,
      immediate: true
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.codeUrl = this.getBaseUrl(this.url)


  },
  // 方法集合
  methods: {
     //确认已登录
    confirmLogged(){
      //获取是否需要人脸识别
      let params = {};
      params.entId = this.data.params1.entId;
      params.eleIssuerId = this.data.params1.userId;   //开票员ID

      getInvoiceWhetherUserFace(params).then(res => {
        if (res.success) {
          let data = res.result;
          if (data === false){
            this.verificationInvoicerStatus();
          }else {
            this.$message.warning('开票员暂未核验，请重新进行核验！');
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //发起登录操作
    verificationInvoicerStatus(){
      this.data.RefreshModal(true);
      let params = {};
      params.entId = this.data.params1.entId;
      params.invoiceUserId = this.data.params1.userId; ;  //开票员ID
      queryConfirmedVerified(params).then(res => {
        if (res.success) {
          // this.$message.success('操作成功');
          this.data.RefreshDetail(1);
          this.closeEvent(false)
        }else{
          //开票未完成状态重复开票
          if(res.code == -210101324){
            this.data.RefreshModal(true);
          }else {
            this.data.RefreshModal(false);
            this.$message.warning(res.message);
          }
        }
      })
    },
    // 开始到计时
    startTimeEvent(){
      this.CountDownConfig.res.startTimingEvent()
    },
    getBaseUrl(url){
      var qr = new QRious({
        // background: 'green',
        // backgroundAlpha: 0.8,
        // foreground: 'blue',
        // foregroundAlpha: 0.8,
        level: 'H',
        // padding: 5,
        // size: 120,
        value: url
      });
      return qr.toDataURL()
    },
    setForm(dataList) {
      const { entName, name, phone, url} = dataList
      this.form.entName = entName
      this.form.kpyName = name
      this.form.kpyPhone = phone
      this.form.url = url
      this.getInvoiceUrl(url)
    },
    getInvoiceUrl(url){
      let params = {url,key:'税务实名'};
      getInvoiceBaseUrl(params).then(res => {
        if (res.status == 0) {
          this.codeUrl = res.value;
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //复制二维码
    upDown(){
      const signUrl =this.codeUrl
      console.log('复制二维码==>',signUrl)
      if (signUrl){
        const imgUrl = signUrl;
        // 如果浏览器支持msSaveOrOpenBlob方法（也就是使用IE浏览器的时候），那么调用该方法去下载图片
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(imgUrl.split(',')[1]);
          var n = bstr.length;
          var u8arr = new Uint8Array(n);
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
          }
          var blob = new Blob([u8arr]);
          window.navigator.msSaveOrOpenBlob(blob, 'code' + '.' + 'png');
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement('a');
          a.href = imgUrl;
          a.setAttribute('download', 'code');
          a.click();
        }

        // this.$message.success('复制成功');
        this.codeShow = true;
      }
    },
    startEvent() {
      sendEleIssuerAuthSMS(this.data.param).then(res => {
        if(res.success==true) {
          this.$message.success('操作成功')
          this.startTimeEvent()
          this.data.startEvent()
          // this.closeEvent(false)
        } else {
          this.$message.warning(res.message)
        }
      })

    }
  },
  }
</script>
<style lang='less' scoped>
.main{
  width: 100%;
  padding: 15px 5px 10px 5px;
  box-sizing: border-box;
  display: flex;
  .title{
    font-weight: bold;
    color: #333333;
  }
  .boxLeft{
    width: 55%;
    box-sizing: border-box;
    padding: 0 20px 0 10px;
    .preview{
      width: 100%;
      box-sizing: border-box;
      border-radius: 5px;
      min-height: 120px;
      border: 2px solid #e8e8e8;
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      p{
        width: 90%;
        margin-bottom: 0px;
        a{
          display: inline-block;
        }
      }
    }
    .tips{
      background: rgba(43, 162, 69, 0.38);
      border-radius: 20px;
      text-align: center;
      color: #FFFFFF;
    }
    .ant-btn-primary{
      // margin-left: 110px;
    }
  }
  .boxRight{
    width: 45%;
    border-left: 1px solid #e8e8e8;
    padding: 0 10px 0 20px;
    .code{
      width: 100%;
      min-height: 120px;
      margin: 20px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .img{
        width: 110px;
        height: 110px;
      }
    }
    .tips{
      background: rgba(43, 162, 69, 0.38);
      border-radius: 20px;
      text-align: center;
      color: #FFFFFF;
    }
    .ant-btn-primary{
      margin-left: 80px;
    }
  }
}
</style>
